@import "./px2vw";
@import "./common";
header{
    @include head_fixed;
    height: vw(150);
    width: 100%;
    ul{
        // margin-top: vw(150); //处理顶部脱离文档流的问题
        height: vw(150);
        line-height: vw(150);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .logo{
            margin: vw(17) 0 vw(10) vw(23);
            img{
                display: block;
                width: vw(123);
                height: vw(123);
            }
        }
        li:nth-of-type(2){
            width: vw(270);
            height: vw(55);
            border: 1px solid #ff9344;
            border-radius: vw(27);
            padding-left:vw(28);
            display: flex;
            align-items: center;
            input:first-of-type{
                width: vw(168);
                height: vw(50);
                line-height: vw(50);
                font-size: vw(24);
                border:none;
            }
            input:last-of-type{
                margin-left: vw(16);
                width: vw(40);
                height: vw(34);
                background-image: url(../images/index/search.png);
                background-size: contain;
            }
        }
        
        select{
            width: vw(163);
            height: vw(60);
            font-size:vw(28);
            color: #000000;
            border-color: #ff9344;
            padding: 0 vw(14) 0 vw(12);
            margin-right: vw(20);
            // 清除下拉框图标样式并替换图标
            appearance: none;
            background: url(../images/index/城市切换下拉.jpg) no-repeat 92.64% 50%;
            background-size: vw(31) vw(16);
        }
    }
}
.main{
    margin-top: vw(150); //处理顶部脱离文档流的问题
    height: vw(1080);
    .banner{
        width: 100%;
        height: vw(285);
        img{
            width: 100%;
            height: 100%;
        }
    }
    // 优惠团购
    .group_purchase{
        padding: 0 vw(20);
        h1{
            display: flex;
            justify-content: space-between;
            height: vw(103);
            padding: vw(35) 0 vw(15);
            .left{
                display: flex;
                align-items: center;
                height: vw(53);
                line-height: vw(53);
                i{
                    font-size: vw(53);
                    color: #ff9344;
                }
                span{
                    margin-left: vw(9);
                    font-size: vw(28);
                    color: #000000;
                    font-weight: normal;
                }
            }
            .right{
                display: flex;
                align-items: center;
                height: vw(53);
                line-height: vw(53);
                a{
                    display: inline-block;
                    label{
                        display: inline-block;
                        height: vw(53);
                        display: flex;
                        span{
                            font-size: vw(23);
                            color: #000000;
                            font-weight: normal;
                        }
                        i{
                            margin-left: vw(8);
                            font-size:vw(23);
                            color: #ff9344;
                        }
                    }
                }
            }
        }
        ul{
            margin: 0 auto;
            width: vw(580);
            @include flex_b;
            flex-wrap: wrap;
            li{
                padding-bottom: vw(30);
                img{
                    width: vw(241);
                    height: vw(94);
                }
            }
        }
    }
    // 猜你喜欢
    .favourites{
        h1{
            @include flex_b;
            height: vw(80);
            padding: 0 vw(20);
            .left{
                display: flex;
                align-items: center;
                height: vw(53);
                line-height: vw(53);
                i{
                    font-size: vw(53);
                    color: #ff9344;
                }
                span{
                    margin-left: vw(9);
                    font-size: vw(28);
                    color: #000000;
                    font-weight: normal;
                }
            }
            .right{
                display: flex;
                align-items: center;
                height: vw(53);
                line-height: vw(53);
                a{
                    display: inline-block;
                    label{
                        display: inline-block;
                        height: vw(53);
                        display: flex;
                        span{
                            font-size: vw(23);
                            color: #000000;
                            font-weight: normal;
                        }
                        i{
                            margin-left: vw(8);
                            font-size:vw(23);
                            color: #ff9344;
                        }
                    }
                }
            }
        }
        ul{
            li{
               display: flex;
               padding: 0 vw(20);
                >.left{
                    img{
                       display: block;
                       width: vw(211);
                       height: vw(164);
                   }
               }
                >.right{
                   display: flex;
                   flex-direction: column;
                   justify-content: space-around;
                   width: vw(520);
                   height: vw(164);
                   padding: 0 vw(20);
                    h2{
                       @include flex_b;
                       align-items: center;
                       width: 100%;
                       height: vw(38);
                       line-height: vw(38);
                       a{
                        font-size: vw(30);
                        color:#000000;
                        font-weight: normal;
                        }
                        span{
                            font-size: vw(22);
                            color: #494949;
                            font-weight: normal;
                         }
                   }
                   h3{
                       font-size: vw(22);
                       color: #494949;
                       font-weight: normal;
                   }
                   h4{
                       @include flex_b;
                       font-weight: normal;
                        span{
                            &:first-of-type{
                                font-size:vw(32);
                                color: #ff9344;
                            }
                            &:last-of-type{
                                font-size: vw(22);
                                color: #494949;
                            }
                        }
                   }
               }
            }
            li:first-of-type{
                padding-bottom: vw(30);
            }
        }
    }
}